<template>
  <div class="phone4">
    <div ref="chartContainerphone4" style="width: 100%;height: 200px"></div>
  </div>
</template>

<script setup name="phonePage1_4">
import {reactive, ref, onMounted, defineProps, defineEmits, nextTick} from "vue";
import * as echarts from 'echarts';
const state = reactive({
})
const chartContainerphone4 = ref(null);
const createCharts_1 = ()=>{
  const chartInstance = echarts.init(chartContainerphone4.value);
  const option = {
    // ECharts 配置项
    title: {
      text: '2024年3月废品重量',
      right:'120px',
      textStyle:{
        color:'#0048ff',
        fontSize:'16px',
        textAlign:'right'
      }
    },
    tooltip: {
      trigger: 'item',
      triggerOn:'click',
      axisPointer: {
        type: 'shadow'
      },
      formatter: '{a} <br/>{b} : {c}吨 ({d}%)',
    },
    legend: {
      orient: 'vertical',
      bottom: '10px',
      left: '5px',
      textStyle:{
        color:'#4271e8'
      }
    },
    series: [{
      name: '重量',
      type: 'pie',
      radius: '80%',
      center: ['60%', '55%'], //调整饼图位置
      label: {
        show: true, // 显示数值
        color:"#00fbea",
        formatter:function (param){
          if(param&&param.value>0){
            return   `${param.value}吨`;
          }else {
            return param.name + ":0吨"
          }
        },
        position: 'inside' // 在顶部显示
      },
      data: [
        { value: 36.3, name: '风能装备' },
        { value: 28.3, name: '核能装备' },
        { value: 17.9, name: '海工装备' },
        { value: 8.3, name: '调质钢' },
        { value: 27.5, name: '传动装备' }
      ],
    }]
  };
  chartInstance.setOption(option);
}
onMounted(()=>{
  createCharts_1();
})
</script>

<style scoped lang="scss">
.phone4{
  border: 1px solid #32a99e;
}
</style>
